<template>
  <!-- 权限 -->
  <el-card class="permissions">
    <el-row type="flex" justify="space-between">
      <el-col>
        <el-input
          v-model="input"
          placeholder="根据用户名搜索"
          size="small"
          class="inputwidth"
        />
        <el-button size="small" @click="clear">清空</el-button>
        <el-button
          size="small"
          type="primary"
          @click="getlistbyusername"
        >搜索</el-button>
      </el-col>
      <el-col :span="2.5">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          @click="$refs.addPremission.dialogFormVisible = true"
        >新增权限组</el-button>
      </el-col>
    </el-row>
    <!-- 消息提示 -->
    <el-alert
      :title="`共${counts}条信息`"
      type="info"
      show-icon
      :closable="false"
    />
    <!-- 列表 -->
    <el-table
      :header-cell-style="{ background: '#fafafa' }"
      :data="permissionslist"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="title" label="用户名" align="center" />
      <el-table-column prop="create_date" label="日期" sortable align="center">
        <template slot-scope="{ row }">{{
          row.create_date | formatDate
        }}</template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="edit(row)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="del(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" justify="end">
      <el-pagination
        :current-page="page"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <!-- 新增、编辑弹出框 -->
    <add-premission
      ref="addPremission"
      :currentrow="currentrow"
      @updata="getpermissionslist"
    />
  </el-card>
</template>
<script>
import { getpermissionslist, delpermissions, getpermissionsdetail } from '@/api/base/permissions'
import AddPremission from './add-premission.vue'

export default {
  name: 'UserIndex',
  components: { AddPremission },
  props: {},
  data() {
    return {
      input: '',
      permissionslist: [],
      page: 1, // 当前页数
      pagesize: 2, // 页尺寸
      counts: 0, // 共几条数据
      currentrow: {}

    }
  },
  computed: {},
  watch: {},
  created() {
    this.getpermissionslist()
  },
  mounted() {},
  methods: {
    // 获取列表
    async getpermissionslist() {
      const { data } = await getpermissionslist({
        page: this.page,
        pagesize: this.pagesize
      })
      this.permissionslist = data.list
      this.counts = data.counts
    },
    // 根据用户名搜索
    async getlistbyusername() {
      const { data } = await getpermissionslist({
        page: this.page,
        pagesize: this.pagesize,
        title: this.input
      })

      this.permissionslist = data.list
      this.counts = data.counts
    },
    clear() {
      this.input = ''
      this.getuserlist()
    },
    // 删除
    async del(row) {
      try {
        await this.$confirm('您确定永久删除吗？', '提示', { type: 'warning' })
        await delpermissions(row)
        if ((this.permissionslist.length === 1) & (this.page !== 1)) {
          this.page--
        }
        this.getpermissionslist()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑
    async edit(row) {
      const { data } = await getpermissionsdetail(row.id)
      console.log(data)
      this.$refs.addPremission.addpermissionsForm = data
      console.log(this.$refs.addPremission.addpermissionsForm)
      this.$refs.addPremission.defaultCheck = data.permissions
      this.$refs.addPremission.dialogFormVisible = true
      this.currentrow = row
    },
    // 页尺寸
    handleSizeChange(val) {
      this.pagesize = val
      if (this.input) {
        this.getlistbyusername()
      } else {
        this.getpermissionslist()
      }
    },
    // 当前页数
    handleCurrentChange(val) {
      this.page = val
      if (this.input) {
        this.getlistbyusername()
      } else {
        this.getpermissionslist()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.permissions {
  .el-table {
    margin: 20px 0;
  }
  .inputwidth {
    width: 200px;
    margin-right: 10px;
    margin-bottom: 20px;
  }
}
</style>
